// 首页组件

import React, { useState, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import FloatingActionButton from './components/FloatingActionButton';
import Modal from './components/Modal';
import './HomePage.css';

/**
 * 首页组件
 * 显示欢迎信息和用户详情
 */
const HomePage: React.FC = () => {
  const { user } = useAuth();
  
  // 弹窗状态管理
  const [modalState, setModalState] = useState({
    contact: false,
    disclaimer: true, // 默认显示免责声明
    about: false
  });
  const [disclaimerCountdown, setDisclaimerCountdown] = useState(0);
  
  // 打开指定弹窗
  const openModal = (type: 'contact' | 'disclaimer' | 'about') => {
    console.log('Opening modal:', type); // 调试信息
    setModalState(prev => ({ ...prev, [type]: true }));
  };
  
  // 关闭指定弹窗
  const closeModal = (type: 'contact' | 'disclaimer' | 'about') => {
    console.log('Closing modal:', type); // 调试信息
    setModalState(prev => ({ ...prev, [type]: false }));
  };
  
  // 组件挂载时的效果
  useEffect(() => {
    console.log('HomePage mounted, modalState:', modalState);
  }, [modalState]);
  
  // 免责声明弹窗5秒后自动关闭，带倒计时
  useEffect(() => {
    let countdownTimer: number;
    
    if (modalState.disclaimer) {
      // 设置初始倒计时
      setDisclaimerCountdown(5);
      
      // 倒计时更新
      const updateCountdown = () => {
        setDisclaimerCountdown(prev => {
          if (prev <= 1) {
            closeModal('disclaimer');
            return 0;
          }
          return prev - 1;
        });
      };
      
      // 每秒更新倒计时
      countdownTimer = setInterval(updateCountdown, 1000);
    } else {
      setDisclaimerCountdown(0);
    }
    
    return () => {
      if (countdownTimer) {
        clearInterval(countdownTimer);
      }
    };
  }, [modalState.disclaimer]);

  return (
    <div className="home-page">
      <div className="welcome-content">
        <h2>欢迎使用玄枢足球预测系统</h2>
        <p>您已成功登录系统</p>
        
        <div className="user-details">
          <h3>用户信息</h3>
          <div className="user-info-grid">
            <div className="user-info-item">
              <span className="label">用户名:</span>
              <span className="value">{user?.username}</span>
            </div>
            <div className="user-info-item">
              <span className="label">邮箱:</span>
              <span className="value">{user?.email}</span>
            </div>
            <div className="user-info-item">
              <span className="label">昵称:</span>
              <span className="value">{user?.nickname}</span>
            </div>
            <div className="user-info-item">
              <span className="label">状态:</span>
              <span className={`value status ${user?.isActive ? 'active' : 'inactive'}`}>
                {user?.isActive ? '活跃' : '非活跃'}
              </span>
            </div>
          </div>
        </div>

        {/* <div className="quick-actions">
          <h3>快速操作</h3>
          <div className="action-buttons">
            <a href="/matches" className="action-button">
              <div className="action-icon">⚽</div>
              <div className="action-text">
                <div className="action-title">比赛数据</div>
                <div className="action-desc">查看今日比赛和历史数据</div>
              </div>
            </a>
          </div>
        </div> */}
      </div>
      
      {/* 浮动操作按钮 */}
      <FloatingActionButton
        onContactClick={() => openModal('contact')}
        onDisclaimerClick={() => openModal('disclaimer')}
        onAboutClick={() => openModal('about')}
      />
      
      {/* 联系我们弹窗 */}
      <Modal
        isOpen={modalState.contact}
        onClose={() => closeModal('contact')}
        title="联系我们"
      >
        <div className="development-notice">
          <span className="dev-icon">🚧</span>
          <h3 className="dev-title">功能开发中</h3>
          <p className="dev-message">联系功能正在开发中，敬请期待！</p>
        </div>
      </Modal>
      
      {/* 免责声明弹窗 */}
      <Modal
        isOpen={modalState.disclaimer}
        onClose={() => closeModal('disclaimer')}
        title="免责声明"
        countdown={disclaimerCountdown}
      >
        <div className="disclaimer-content">
          <span className="warning-icon">⚠️</span>
          <p className="disclaimer-text">
            本网站所提供之中国竞彩赛事分析推荐，纯属数据分析而创作，并非投注建议。相关数据等皆来自中国竞彩官方网站，据此购彩风险自担。相关部门已暂停网络购彩，一切互联网售彩皆为非法，如要购彩请到线下合法彩票销售网点。
          </p>
        </div>
      </Modal>
      
      {/* 关于我们弹窗 */}
      <Modal
        isOpen={modalState.about}
        onClose={() => closeModal('about')}
        title="关于我们"
      >
        <div className="development-notice">
          <span className="dev-icon">🚧</span>
          <h3 className="dev-title">功能开发中</h3>
          <p className="dev-message">介绍功能正在开发中，敬请期待！</p>
        </div>
      </Modal>
    </div>
  );
};

export default HomePage;